<template>
  <div class="Employee" v-loading="loading">
    <div style="text-align: right; padding-right: 30px; color: #409eff; font-size: 14px"><span @click="goFidleSetting" style="cursor: pointer">维护字段信息</span></div>
    <el-form :rules="rules" :model="form" ref="form" label-width="120px" :class="{ form_entry: isType == 'entry' }" class="demo-formLabelList" label-position="left">
      <el-form-item :ref="item.columnname == '试用期' ? 'trial' : ''" v-for="(item, index) in form.fields" :key="index" :class="{ formItems: !item.label, formLabels: item.label, formItem: item.datatype == '6' || item.datatype == '11' || item.datatype == '14', formItem1: item.datatype == '12', formItem2: item.datatype == '7', formItem3: isType == 'entry', formItem4: item.isSpan }" :prop="`fields.${index}.value`" :rules="rules[item.rule]" v-show="item.isShow">
        <span v-if="item.isSpan" class="top_border">
          <i class="iconfont xe612" @click="delFormItem(item, index)" title="删除">&#xe612;</i>
        </span>

        <label slot="label" :id="item.moudleTypeCode" v-if="item.label && item.isShow">
          {{ item.moudleName }}
          <el-upload style="display: inline-block" v-if="item.moudleTypeCode === 1003 || item.moudleTypeCode === 1004" :data="{ item, index }" :http-request="uploadSectionFileOCR" :show-file-list="false" action="https://jsonplaceholder.typicode.com/posts/">
            <el-button slot="trigger" class="btn" v-if="item.moudleTypeCode === 1003" size="small" type="primary" round>上传身份证照片</el-button>
            <el-button slot="trigger" class="btn" v-if="item.moudleTypeCode === 1004" size="small" type="primary" round>上传工资卡照片</el-button>
          </el-upload>
          <el-button slot="trigger" class="btn" v-if="item.isList" size="small" type="primary" @click="addFormItem(item, index)" round>添加{{ item.moudleName }}</el-button>
        </label>
        <label slot="label" v-else-if="item.datatype != 12 && item.isShow && !item.isSpan">{{ item.columnname }} : </label>
        <!-- 时限选择 -->
        <div v-if="item.datatype == '2' && (item.columnname == '试用期' || item.columnname == '合同期限')">
          <el-input type="number" placeholder="请输入期限" style="width: 50%" v-model="item.value" min="0" :disabled="!item.isAllowEdit" @change="select_cha(item)" />
          <el-select style="width: 5%; margin-left: 8px" v-model="item.fieldItems[0].value" :disabled="!item.isAllowEdit" @change="select_cha(item)">
            <el-option v-for="option in item.fieldItems[0].options" :key="option.optionvalue" :label="option.optiondisplay" :value="option.optionvalue"></el-option>
          </el-select>
        </div>
        <!-- input -->
        <el-input v-if="(item.datatype == '1' || item.datatype == '2') && item.isShow && item.columnname != '试用期' && item.columnname != '合同期限'" v-model="item.value" :disabled="!item.isAllowEdit" :maxlength="item.maxLength" @blur="input_blurFun(item)" type="text"></el-input>
        <!-- radio -->
        <el-radio-group v-if="item.datatype == '3' && item.isShow" v-model="item.value">
          <el-radio v-for="i in item.options" :label="i.optionvalue" :key="i.optionvalue">{{ i.optiondisplay }}</el-radio>
        </el-radio-group>
        <!-- checkbox -->
        <el-checkbox-group v-if="item.datatype == '4' && item.isShow" v-model="item.value">
          <el-checkbox v-for="i in item.options" :label="i.optionvalue" :key="i.optionvalue">{{ i.optiondisplay }}</el-checkbox>
        </el-checkbox-group>
        <!-- select -->
        <el-select v-if="item.datatype == '5' && item.isShow" v-model="item.value" @change="select_cha(item)" placeholder="请选择">
          <el-option v-for="option in item.options" :key="item.columnid + '_' + option.optionvalue" :label="option.optiondisplay" :value="option.optionvalue"></el-option>
          <el-option disabled :value="item.columnid" :key="item.columnid" v-if="item.isCustomOption">
            <div @click="AddOptions(index, item.customOptionTypeCode)" style="color: #409eff; cursor: pointer">
              <span class="el-icon-plus" style="font-weight: 900"></span>
              <span style="font-weight: 900">新增</span>
            </div>
          </el-option>
        </el-select>
        <!-- cascader 地址 -->
        <span v-if="item.datatype == '6' && item.fieldItems && item.isShow">
          <el-cascader :key="item.columnid" popper-class="max300" :props="defaultProps1" :options="cityList" v-model="item.value" clearable></el-cascader>
          <el-input v-model="item.fieldItems[0].value" :maxlength="item.fieldItems[0].maxLength" type="text"></el-input>
        </span>
        <!-- 部门 -->
        <el-cascader v-if="item.datatype == '7' && item.isShow" :options="companySection" :props="defaultProps" v-model="item.value" placeholder="部门" clearable></el-cascader>
        <!-- picker -->
        <el-date-picker :key="item.columnid" placement="bottom" v-if="item.datatype == '8' && item.isShow" v-model="item.value" type="date" format="yyyy年MM月dd日" value-format="yyyy-MM-dd" placeholder="选择日期" @change="datePickerChange(item)" :disabled="!item.isAllowEdit"></el-date-picker>
        <!-- 公司 -->
        <el-select v-if="item.datatype == '10' && item.isShow" v-model="item.value" placeholder="请选择">
          <el-option v-for="option in Company" :key="option.subid" :label="option.subName" :value="option.subid"></el-option>
        </el-select>
        <!--  按钮上传-->
        <div v-if="item.datatype == '11' && item.isShow" class="uploadBody">
          <el-button size="medium" type="primary" round @click="uploadShow(index)">上 传</el-button>
          <p class="files" v-for="(i, ix) in item.files" :key="ix">
            <span class="name" :title="i.fileName" @click="open(i.fileUrl)">{{ i.fileName }}</span>
            <span class="del redColorFont" @click="delFile(index, ix)">x</span>
          </p>
        </div>
        <!-- 单图片上传-->
        <div class="sfz-bar" v-if="item.columnname === '身份证正面'">身份信息</div>
        <div v-if="item.datatype == '12' && item.isShow && (item.columnname == '身份证正面' || item.columnname == '身份证反面' || item.columnname == '工资卡')" class="uploadBodyAuto">
          <img class="img" :src="item.value ? item.value : getImgUrl(item.columnname)" @click="open(item.value)" alt="" srcset="" />
          <el-upload action="fakeaction" :ref="'upload' + index" :show-file-list="false" :auto-upload="false" :on-change="beforeAvatarUpload1" :http-request="uploadSectionFile1">
            <el-button size="medium" type="primary" round style="margin-left: 30px" @click="uploading(index, 1)">{{ item.value ? "重新上传" : "上传" }}{{ item.columnname }}</el-button>
          </el-upload>
        </div>
        <div class="sfz-bar" v-if="item.columnname === '学历证书'">学历信息</div>
        <div v-if="item.datatype == '12' && item.isShow && (item.columnname == '学位证书' || item.columnname == '学历证书')" class="uploadBodyAuto">
          <img class="img" :src="item.value ? item.value : getImgUrl(item.columnname)" @click="open(item.value)" alt="" srcset="" />
          <el-upload action="fakeaction" :ref="'upload' + index" :show-file-list="false" :auto-upload="false" :on-change="beforeAvatarUpload1" :http-request="uploadSectionFile1">
            <el-button size="medium" type="primary" round style="margin-left: 30px" @click="uploading(index, 1)">{{ item.value ? "重新上传" : "上传" }}{{ item.columnname }}</el-button>
          </el-upload>
        </div>
        <!-- 其他上传 -->
        <div v-if="item.datatype == '13' && item.isShow" class="OtherUpload">
          <!-- <el-select v-model="item.value" placeholder='请选择'>
            <el-option v-for="option in item.options" :key="option.optionvalue" :label="option.optiondisplay" :value="option.optionvalue"></el-option>
          </el-select> -->
          <span class="imgBody" v-for="(i, ix) in item.files" :key="ix">
            <img class="img" :src="i.fileUrl" :title="i.fileName" @click="open(i.fileUrl)" alt="" srcset="" />
            <span class="del redColorFont" @click="delFile(index, ix, 'fieldItems')">x</span>
          </span>
          <el-upload class="uploader" action="fakeaction" :ref="'upload' + index" :show-file-list="false" :auto-upload="false" :on-change="beforeAvatarUpload1" :http-request="uploadSectionFile1">
            <span @click="uploading(index, 2)">+</span>
          </el-upload>
        </div>
        <!--  银行 -->
        <span v-if="item.datatype == '14' && item.fieldItems && item.isShow">
          <el-select
            v-model="item.value"
            :ref="'Back' + index"
            filterable
            default-first-option
            :filter-method="
              (val) => {
                tailoringFilter(YeepayBank, { key1: 'key', key2: 'value' }, val, 'BankList', 'Back' + index);
              }
            "
            @blur="initTailoringData(YeepayBank, item.value, 'value', 'BankList', 'isBlur')"
            placeholder="请选择"
          >
            <el-option v-for="option in BankList" :key="option.key" :label="option.value" :value="option.key"></el-option>
          </el-select>
          <el-input v-model="item.fieldItems[0].value" :maxlength="item.fieldItems[0].maxLength" type="text"></el-input>
        </span>
      </el-form-item>
      <!-- <el-form-item class="sendinfo">
        <div>
          <el-checkbox v-model="sendInfo">发放入职登记（通过短信和邮件给员工发放入职登记通知）</el-checkbox>
        </div>
        <div v-if="sendInfo" class="sel">
          <el-select v-model="registerID" placeholder="请选择" filterable>
            <el-option v-for="(item, index) in registerTable" :key="index" :value="item.key" :label="item.value"></el-option>
          </el-select>
        </div>
      </el-form-item> -->
    </el-form>
    <div class="Footer">
      <el-button size="medium" @click="goEmployeeList" round>取 消</el-button>
      <el-button size="medium" type="primary" round :loading="isConfirmLoading" style="margin-left: 30px" @click="saveConfirm">保 存</el-button>
    </div>
    <!-- 上传弹框 -->
    <el-dialog title="上传文件" :close-on-click-modal="false" :visible.sync="isShow" width="350px">
      <el-upload class="upload-demo" ref="upload" action="fakeaction" :http-request="uploadSectionFile" :file-list="fileList" :on-change="addFile" :on-remove="deleteFile" :before-upload="beforeAvatarUpload" :auto-upload="false">
        <el-button slot="trigger" size="small" type="primary" round>添 加</el-button>
      </el-upload>
      <div class="dialog_footer">
        <el-button size="small" type="primary" :loading="btnloading" @click="changeDep" round>开始上传</el-button>
      </div>
    </el-dialog>
    <!-- 选项新增 -->
    <AddOption :isDialog.sync="AddOptionParams.isDialog" :tabDefault="AddOptionParams.tabDefault" :IsDisabledCode="true" @search="AddOptionsCallBack" />
  </div>
</template>
<script>
import { mapState } from "vuex";
import * as Rules from "@/util/validate";
import mixins from "./mixins/index";
import upload from "./mixins/upload";
import AI_setdata from "./mixins/AI_setdata";
import AddOption from "../../settingUp/AddOption.vue";
export default {
  props: {
    registerTable: {
      type: Array,
    },
  },
  data() {
    return {
      form: {},
      rules: {}, // 校验
      defaultProps: {
        children: "childrens",
        label: "name",
        value: "id",
      },
      defaultProps1: {
        children: "children",
        label: "name",
        value: "areaID",
      },
      Company: [], // 公司
      loading: false,
      isConfirmLoading: false,
      isType: "", // add 新增 adit 新增  entry 办理入职  ConfirmEntry 确认入职
      isShow: false,
      employeeId: "", // 员工id
      BankList: [], // 科目
      formData: [], // 初始化对象
      AddOptionParams: {
        //默认添加的选项
        tabDefault: "",
        //是否显示
        isDialog: false,
        //当前正在添加第几个字段的选项
        index: -1,
      },
      //是否发送入职记录
      sendInfo: false,
      //入职登记表ID
      registerID: "",
    };
  },
  mixins: [mixins, upload, AI_setdata],
  components: {
    AddOption,
  },
  computed: {
    ...mapState({
      management: (state) => state.personnel.management,
      YeepayBank: (state) => state.personnel.YeepayBank,
      companySection: (state) => state.common.companySection,
      cityList: (state) => state.common.provinceCityList,
      tagCurrent: (state) => state.tag.tagCurrent,
    }),
  },
  methods: {
    goFidleSetting() {
      this.$router.push({ name: "inductionSetting" });
    },
    //新增选项
    AddOptions(index, customOptionTypeCode) {
      this.AddOptionParams.tabDefault = customOptionTypeCode;
      this.AddOptionParams.index = index;
      this.AddOptionParams.isDialog = true;
    },
    //新增选项回调
    AddOptionsCallBack() {
      this.$api.optionsManage.GetEnumDataOptiont({ metaTypeCode: this.AddOptionParams.tabDefault }).then((res) => {
        if (res.data.status == 200) {
          var newArray = [];
          res.data.data.forEach((item, index) => {
            newArray.push({
              index: index,
              optiondisplay: item.value,
              optionvalue: item.key,
            });
          });
          //学历组件存在两次,在添加完选项后需要重新两个组件的选项
          if (this.form.fields[this.AddOptionParams.index].columnname.indexOf("学历") > -1) {
            this.form.fields.filter(m=>m.columnname?.indexOf("学历") > -1)?.map(m=>{
              m.options = newArray;
            });
          } else {
            this.form.fields[this.AddOptionParams.index].options = newArray;
          }
        }
      });
    },
    async uploadSectionFileOCR(params) {
      //导入
      const {
        file,
        data: { item, index },
      } = params; //moudleTypeCode  1003个人信息  1004银行卡
      const form = new FormData();
      form.append("file", file);
      const { data } = await this.$api.optionsManage[item.moudleTypeCode == 1003 ? "IDCardFrontOCR" : "BankCardOCR"](form);
      const obj = {},
        whiteName = ["身份证号", "身份证正面", "性别", "出生日期", "户籍所在地", "工资卡号", "工资卡"];
      this.form.fields.map((i, idx) => {
        if (whiteName.includes(i.columnname)) {
          obj[i.columnname] = idx;
        }
      });
      const fileData = new FormData();
      fileData.append("formFile", file);
      const { data: img } = await this.$api.publicApi.uploadOssFile(fileData);
      if (item.moudleTypeCode === 1003) {
        const { idNum, address, sex, birth } = data.data;
        this.form.fields[obj["身份证号"]].value = idNum;
        // this.form.fields[obj['户籍所在地']].value = '';
        this.form.fields[obj["户籍所在地"]].fieldItems[0].value = address;
        this.form.fields[obj["性别"]].value = sex == "男" ? 1 : 2; //1男  2女
        this.form.fields[obj["出生日期"]].value = birth.replace(/\/g/, "-");
        this.form.fields[obj["身份证正面"]].value = img.data.fileUrl;
      }
      if (item.moudleTypeCode === 1004) {
        this.form.fields[obj["工资卡号"]].value = data.data.cardNo;
        this.form.fields[obj["工资卡"]].value = img.data.fileUrl;
      }
    },

    saveConfirm() {
      // form提交保存
      this.isConfirmLoading = true;
      this.$refs.form.validate((valid) => {
        if (valid) {
          let params = this.getParams();
          if (this.isType == "add") {
            this.$api.personChange
              .InsertEmployeeEntry(params, this.registerID)
              .then((res) => {
                this.isConfirmLoading = false;
                if (res.data.status == 200) {
                  this.goEmployeeList();
                }
              })
              .catch(() => {
                this.isConfirmLoading = false;
              });
          }
        } else {
          this.isConfirmLoading = false;
          setTimeout(() => {
            var isError = document.getElementsByClassName("is-error");
            isError[0].querySelector("input").focus();
          }, 1);
          return false;
        }
      });
    },

    goEmployeeList() {
      this.$store.commit("DEL_TAG", this.tagCurrent);
      return this.$router.back();
      // this.$notify({ title: "成功", message: `办理成功`, type: "success", duration: 1500 });
    },

    addCheck(row, type, code) {
      // 添加校验
      let message = ""; // 校验提示
      let trigger = ""; // 校验触发方式
      let isverify = null; // 校验规则
      if (row.datatype == "1" || row.datatype == "2" || row.datatype == "10") {
        // 输入框
        message = `请输入${row.columnname}`;
        trigger = "blur";
      } else if (row.datatype == "3" || row.datatype == "4" || row.datatype == "5" || row.datatype == "6" || row.datatype == "7" || row.datatype == "8" || row.datatype == "9" || row.datatype == "14") {
        // 选择框
        message = `请选择${row.columnname}`;
        trigger = "change";
      } else if (row.datatype == "11" || row.datatype == "12") {
        message = `请上传${row.columnname}`;
      }

      if (row.datatype == "1" || row.datatype == "2") {
        if (row.columnname == "手机号" || row.columnname == "紧急联系人电话") {
          isverify = { type: "number", validator: Rules.isPhone };
        } else if (row.columnname == "邮箱") {
          isverify = { validator: Rules.isEmail };
        } else if (row.columnname == "身份证号") {
          isverify = { validator: Rules.isIdCard };
        } else if (row.columnname == "银行卡号" || row.columnname == "工资卡号") {
          isverify = { validator: Rules.isBank };
        }
      }
      // eslint-disable-next-line no-extra-parens
      let isRequired = this.isType == "entry" ? (code == 1001 ? row.required : false) : row.required; // q确认入职时取消除基本信息以外的必填
      this.rules[type] = isverify ? [{ required: isRequired, message, trigger }, isverify] : [{ required: isRequired, message, trigger }];
    },

    initialize(type) {
      // 初始化
      if (type == "entry") {
        this.getData(type);
        return;
      }
      this.BankList = this.YeepayBank.splice(0, 600);
      this.loading = true;
      this.$api.systemManagement
        .GetStructureSubCompanyTree()
        .then((res) => {
          // 获取合同公司
          let resData = res.data.data;
          this.Company = resData;
          this.getData(type);
        })
        .catch(() => {
          this.loading = false;
        });
    },

    getData(type) {
      // 获取自定义字段
      this.isType = type;
      this.$api.personChange
        .GetModuleFields()
        .then((res) => {
          let resData = res.data.data;
          this.setData(resData, type);
        })
        .catch(() => {
          this.loading = false;
        });
    },
    setData(resData, type) {
      // 设置 初始化数据 添加校验
      let formItems = [];
      resData.map((i) => {
        i.moudleData.map((item, ind) => {
          let id = this.getGuid();
          item.fields.map((items, index) => {
            items.rule = "value" + index + Math.floor(Math.random() * 900) + 100;
            this.addCheck(items, items.rule, i.moudleTypeCode); // 添加校验
            if (index == 0) {
              formItems.push({
                moudleName: this.getMouName(i.moudleTypeCode),
                label: ind == 0 ? true : false,
                isSpan: ind == 0 ? false : true,
                moudleTypeCode: i.moudleTypeCode,
                employeeModuleId: item.employeeModuleId,
                rule: "",
                id,
                isList: i.isList,
                isShow: type == "entry" ? false : true,
              });
            }
            formItems.push({
              ...items,
              id,
              moudleTypeCode: i.moudleTypeCode,
              // eslint-disable-next-line no-extra-parens
              isShow: type == "entry" ? (i.moudleTypeCode == 1001 ? true : false) : true,
            });
          });
        });
      });
      formItems.map((item) => {
        if (item.datatype == 7 || item.datatype == 6) {
          if (type == "add" || type == "entry") {
            item.value == [];
          } else {
            if (item.value && item.value != null) {
              let newArr = [];
              item.value.split(",").forEach((m) => {
                let newValue = Number(m);
                newArr.push(newValue ? newValue : m);
              });
              item.value = newArr;
            } else {
              item.value = [];
            }
          }
        }
        // if (item.datatype == 11 || item.datatype == 13) {
        //   item.files && item.files != null ? '' : item.files == [];
        // }
        if (type == "edit" || type == "ConfirmEntry" || item.datatype == 3) {
          if (item.value == 0) {
            item.value = "";
          }
          if (item.datatype == 5 || item.datatype == 3 || item.datatype == 13) {
            if (item.value && item.value != null) {
              item.value = Number(item.value);
            }
          }
        }
        if (item.datatype == 2 && (item.columnname == "试用期" || item.columnname == "合同期限")) {
          item.value = Number(item.value ?? 0);
          item.fieldItems[0].value = Number(item.fieldItems[0].value ?? 0) == 0 ? 2 : Number(item.fieldItems[0].value);
        }
        if (item.datatype == 8 && item.value) {
          item.value = this.getDateTime(item.value); // 存在即初始化time
        }
        //转正日期在修改或者确认的时候 如果值为空则根据试用期和入职日期重新计算
        // if(item.datatype == 8 && item.columnname == "转正日期" && !item.value && (type == "edit" || type == "ConfirmEntry")) {
        //   let tryDate = formItems.find(m=>m.columnname == "试用期");
        //   let joinDate = formItems.find(m=>m.columnname == "入职日期");
        //   debugger
        // }
        if (item.datatype == 14) {
          let thisBank = this.YeepayBank.find((m) => m.key == item.value);
          if (thisBank) {
            this.BankList.push(thisBank);
          }
        }
      });
      this.$nextTick(() => {
        this.form = {
          fields: formItems,
        };
        this.formData = resData;
        // this.$nextTick(() => {  // 报错注释 2022-09-09
        //   const formItem1 = document.querySelectorAll('.formItem1');
        //   const res1 = window.matchMedia('(min-width:1410px)');
        //   const res2 = window.matchMedia('(max-width:1410px)');
        //   if (res1.matches) {
        //     formItem1[2].style.width = 41 + 'vw';
        //     formItem1[4].style.width = 35 + 'vw';
        //   }
        //   if (res2.matches) {
        //     formItem1[2].style.width = 30 + 'vw';
        //     formItem1[4].style.width = 35 + 'vw';
        //   }
        // });

        this.loading = false;
        if (!this.$route.query.code) return;
        this.$nextTick(() => {
          const codeDom = document.getElementById(`${this.$route.query.code}`);
          const scrollDom = document.getElementsByClassName("el-form")[0];
          const scrollDomInfo = scrollDom.getBoundingClientRect();
          const codeDomInfo = codeDom.getBoundingClientRect();
          scrollDom.scrollTop = codeDomInfo.top - scrollDomInfo.top - 10;
        });
      });
      console.log(formItems, "formItems");
    },

    addFormItem(row, index) {
      // 新增item
      let item = this.formData.find((i) => {
        return i.moudleTypeCode == row.moudleTypeCode;
      });
      if (item) {
        let formItems = [];
        let i = index + item.moudleData.length;
        item.moudleData.map((items) => {
          i += items.fields.length;
        });
        let id = this.getGuid();
        let employeeModuleId = this.getGuid();
        item.moudleData[0].fields.map((items, index) => {
          items.rule = "value" + index + Math.floor(Math.random() * 5960) + 100;
          this.addCheck(items, items.rule, item.moudleTypeCode); // 添加校验
          if (index == 0) {
            formItems.push({
              employeeModuleId: item.employeeModuleId ?? employeeModuleId,
              moudleTypeCode: item.moudleTypeCode,
              isShow: this.isType == "entry" ? false : true,
              id,
              isSpan: true,
            });
          }
          let obj = {
            ...items,
            id,
            moudleTypeCode: item.moudleTypeCode,
            // eslint-disable-next-line no-extra-parens
            isShow: this.isType == "entry" ? (item.moudleTypeCode == 1001 ? true : false) : true,
          };
          obj.value = "";
          if (items.datatype == "6" || items.datatype == "14") {
            // 地址 银行时添加详细
            obj.fieldItems[0].value = "";
          }
          formItems.push(obj);
        });
        if (item.isList) {
          let newData = JSON.parse(JSON.stringify(item.moudleData[0]));
          newData.fields.forEach((m) => {
            m.value = "";
          });
          newData.employeeModuleId = employeeModuleId;
          item.moudleData.push(newData);
        }
        this.form.fields.splice(i, 0, ...formItems);
      }
    },
    delFormItem(row, index) {
      // del item
      let item = this.formData.find((i) => {
        return i.moudleTypeCode == row.moudleTypeCode;
      });
      if (item) {
        let i = item.moudleData[0].fields.length + 1; // 加1 是删除多添加的 isSpan
        let dataIndex = item.moudleData.findIndex((m) => m.employeeModuleId == row.employeeModuleId);
        this.form.fields.splice(index, i);
        item.moudleData.splice(dataIndex, 1);
      }
    },
  },
  mounted() {},
};
</script>
<style lang="less">
.el-cascader-menu__list {
  max-height: 300px;
}
.Employee {
  width: 100%;
  height: 100%;
  overflow: auto;
  position: relative;
  .demo-formLabelList {
    .sendinfo {
      .el-form-item__content {
        margin-left: 0 !important;
        width: 50%;
        .sel {
          width: 50%;
        }
      }
    }
    height: calc(100% - 65px);
    overflow: auto;
    padding: 10px 30px 0 20px;
    .formItems {
      width: 48%;
      display: inline-block;
      .el-form-item__label {
        color: #95a4ba;
        text-align: right;
      }
      &:nth-last-child(1) {
        .el-form-item__label {
          width: auto !important;
          padding: 0 20px;
          padding-top: 20px;
        }
        .el-form-item__content {
          padding-top: 20px;

          margin: 0 !important;
        }
      }

      .el-input {
        width: 80%;
        display: inline-block;
        min-width: 200px;
      }
      .el-select {
        width: 80%;
        display: inline-block;
        min-width: 200px;
        .el-input {
          width: 100%;
        }
      }
    }
    .formLabels {
      background: #f5f8fd;
      height: 38px;
      .el-form-item__label {
        width: 100% !important;
        padding-left: 10px;
        color: #333;
        line-height: 38px;
      }
      .xe632 {
        cursor: pointer;
      }
      .el-form-item__content {
        display: none;
      }
    }
    .formItem {
      width: 100%;
      .el-input {
        width: 50%;
      }
      .el-select {
        width: 50%;
        max-width: 213px;
      }
    }
    .formItem1 {
      width: auto;
      .el-form-item__content {
        margin-left: 0 !important;
        width: 300px;
      }
    }

    .formItem2 {
      .el-cascader {
        width: 80%;
        display: inline-block;
        min-width: 200px;
        .el-input {
          width: 100%;
        }
      }
    }
    .formItem3 {
      width: 100%;
    }
    .formItem4 {
      width: 100%;
      margin: 0 0 10px 0;
      .el-form-item__content {
        margin-left: 50px !important;
      }
    }
    .top_border {
      display: block;
      width: 96%;
      border-bottom: 1px solid #e3e3e7;
      text-align: right;
      .xe612 {
        cursor: pointer;
      }
    }
    .btn {
      margin-left: 15px;
      padding: 5px 7px !important;
    }
  }
  .Footer {
    display: flex;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #f6f6fa;
    margin-top: 5px;
  }
  .form_entry {
    padding: 10px 0 0 0;
  }
  .upload-demo {
    min-height: 200px;
  }
  .dialog_footer {
    text-align: right;
  }
  .uploadBody {
    .files {
      display: flex;
    }
    .name {
      width: 150px;
      overflow: hidden;
      display: inline-block;
      cursor: pointer;
    }
    .del {
      margin-left: 20px;
      cursor: pointer;
      font-size: 16px;
    }
  }
  .sfz-bar {
    padding: 20px 20px;
    color: #ccc;
  }
  .uploadBodyAuto {
    // text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    .img {
      width: 260px;
      height: 162px;
    }
    .el-button {
      width: 260px;
      margin: 0 !important;
      background: #407ff0;
    }
  }
  .OtherUpload {
    .uploader,
    .imgBody {
      width: 100px;
      height: 100px;
      float: left;
      border: 0.5px solid #ccc;
      margin-top: 15px;
      border-radius: 5px;
      cursor: pointer;
    }
    .imgBody {
      display: inline-block;
      position: relative;
      margin-left: 15px;
      &:nth-child(1) {
        margin-left: 0;
      }
      .img {
        width: 100%;
        height: 100%;
        border-radius: 5px;
      }
      .del {
        cursor: pointer;
        font-size: 16px;
        position: absolute;
        right: 3px;
        top: 0;
        height: 12px;
        line-height: 15px;
      }
    }
    .uploader {
      text-align: center;
      line-height: 100px;
      font-size: 45px;
      color: #ccc;
      margin-left: 15px;
    }
  }
}
</style>
